<template>
    <q-table row-key="id" separator="cell" :rows="tableData" :columns="columns"
             v-model:pagination="pagination" :rows-per-page-options="pageOptions" :loading="loading"
             @request="onRequest">
      <template v-slot:top="props">
        <q-space/>
        <q-btn flat round dense :icon="props.inFullscreen ? 'fullscreen_exit' : 'fullscreen'"
               @click="props.toggleFullscreen" class="q-ml-md"/>
      </template>
      <template v-slot:body-cell-jobName="props">
        <q-td :props="props">
          <q-badge align="middle"
                   :color="props.row.jobFireException  ? 'negative' : 'positive'">
            {{ props.row.jobName }}
          </q-badge>
        </q-td>
      </template>
      <template v-slot:body-cell-jobGroup="props">
        <q-td :props="props">
          <q-badge align="middle"
                   :color="props.row.jobFireException  ? 'negative' : 'positive'">
            {{ props.row.jobGroup }}
          </q-badge>
        </q-td>
      </template>
      <template v-slot:body-cell-jobInnerName="props">
        <q-td :props="props">
          <q-badge align="middle"
                   :color="props.row.jobFireException  ? 'negative' : 'positive'">
            {{ props.row.jobInnerName }}
          </q-badge>
        </q-td>
      </template>
      <template v-slot:body-cell-jobFireTime="props">
        <q-td :props="props">
          {{ showDateTime(props.row.jobFireTime) }}
        </q-td>
      </template>
      <template v-slot:body-cell-jobNextFireTime="props">
        <q-td :props="props">
          {{ showDateTime(props.row.jobNextFireTime) }}
        </q-td>
      </template>
      <template v-slot:body-cell-jobFireLog="props">
        <q-td :props="props">
          <q-badge align="middle" class="ellipsis" @click=""
                   :color="props.row.jobFireException  ? 'negative' : 'positive'">
            {{ props.row.jobFireLog }}
          </q-badge>

        </q-td>
      </template>
      <template v-slot:body-cell-actions="props">
        <q-td :props="props" class="q-gutter-x-xs">
          <q-btn flat dense rounded icon="zoom_in" color="warning" @click="showException(props.row.memo)"
          >
            <q-tooltip>
              {{ $t('Show') + $t('Exception') }}
            </q-tooltip>
          </q-btn>
          <q-btn flat dense rounded icon="delete_outline" color="negative"
                 @click="handleDelete(props.row)">
            <q-tooltip>
              {{ $t('Delete') }}
            </q-tooltip>
          </q-btn>
        </q-td>
      </template>
    </q-table>
    <q-dialog v-model="showExceptionFlag">
      <q-card>
        <q-card-section>
          {{ exception }}
        </q-card-section>
      </q-card>
    </q-dialog>
    <q-dialog v-model="showLogFlag">
      <q-card>
        <q-card-section>
          {{ log }}
        </q-card-section>
      </q-card>
    </q-dialog>
</template>

<script setup>
import useTableData from 'src/composables/useTableData'
import {computed, defineProps, onMounted, ref, toRefs, watch} from 'vue'
import useCommon from 'src/composables/useCommon'

const props = defineProps({
  jobInnerName: {
    type: String,
    required: true
  },
  jobGroup: {
    type: String,
    required: true
  }
});
const {jobInnerName,jobGroup} = toRefs(props)
const {showDateTime} = useCommon()
watch(() => jobInnerName.value, (newValue) => {
  queryParams.value.jobInnerName = newValue
})
const url = {
  list: 'job/job-log',
  delete: 'job/delete-log-by-id',
}
const columns = computed(() => {
  return [
    {name: 'id', align: 'center', label: 'ID', field: 'id'},
    {name: 'jobName', align: 'center', label: t('Job') + t('Name'), field: 'jobName'},
    {name: 'jobGroup', align: 'center', label: t('Job') + t('Group'), field: 'jobGroup'},
    {name: 'jobInnerName', align: 'center', label: t('Job') + t('Inner') + t('Name'), field: 'jobInnerName'},
    {name: 'jobFireTime', align: 'center', label: t('Fire') + t('Time'), field: 'jobFireTime'},
    {name: 'jobNextFireTime', align: 'center', label: t('Next') + t('Fire') + t('Time'), field: 'jobNextFireTime'},
    {name: 'jobFireLog', align: 'center', label: t('Fire') + t('Log'), field: 'jobFireLog'},
    {name: 'jobFireException', align: 'center', label: t('Fire') + t('Exception'), field: 'jobFireException'},
    {name: 'actions', align: 'center', label: t('Actions'), field: 'actions'},
  ]
})
const {
  t,
  dictOptions,
  pagination,
  queryParams,
  pageOptions,
  GqaDictShow,
  loading,
  tableData,
  onRequest,
  getTableData,
  handleSearch,
  resetSearch,
  handleDelete,
} = useTableData(url)

onMounted(async () => {
  pagination.value.sortBy = 'job_fire_time'
  pagination.value.descending = true
  queryParams.value.jobInnerName = jobInnerName.value
  queryParams.value.jobGroup = jobGroup.value
  getTableData()
})

const showExceptionFlag = ref(false)
const exception = ref('')
const showLogFlag = ref(false)
const log = ref('')
const showException = (b) => {
  exception.value = b
  showExceptionFlag.value = true
}
const showLog = (b) => {
  log.value = b
  showLogFlag.value = true
}
</script>
